<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>vue</title>
  </head>
  <link rel="stylesheet" type="text/css" href="./style.css" />
  <script src="../vue-2.6.11.js"></script>
  <body>
    <!-- 模板 -->

    <div id="app">
      <h2>自定义的下拉框</h2>
      <custom-select></custom-select>
    </div>

    <script>
      //vm实例
      var vm = new Vue({
        el: '#app',
        // 局部注册
        components: {
          'custom-select': {
            template: `<section class="warp">
							<div class="searchIpt clearFix">
								<div class="clearFix">
									<input type="text" class="keyWord" value="" />
									<input type="button" value="GO">
									<span></span>
								</div>
								<ul class="list">
									<li>html+css</li>
									<li>html5+css3</li>
									<li>javascript</li>
									<li>angular</li>
									<li>react</li>
									<li>vue</li>
									<li>jquery</li>
									<li>nodejs</li>
								</ul>
							</div>
						</section>`
          }
        }
      })
    </script>
  </body>
</html>
